


import { connect } from 'dva';

import { Form, Input, Button, Checkbox } from 'antd';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};


function EmployeeList({ employee, dispatch }) {


  const onFinish = (values) => {
    console.log('Success:', values);

    dispatch({
      type: 'list/addEmployee',
      payload: {
        employee: employee


      },
    })

  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    
    <Form sytle={{width:"80px"}}
      {...layout}
      name="basic"
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >

      <Form.Item sytle={{width:"80px",}}
        label="key"
        name="key"
        rules={[{ required: true, message: 'Please input your key!' }]}
      >
        <Input sytle={{width:"30px",}} />
      </Form.Item>

      <Form.Item sytle={{width:"80px",}}
        label="FirstName"
        name="firstName"
        rules={[{ required: true, message: 'Please input your firstName!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item sytle={{width:"80px"}}
        label="LastName"
        name="lastName"
        rules={[{ required: true, message: 'Please input your lastName!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Age"
        name="age"
        rules={[{ required: true, message: 'Please input your age!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Address"
        name="address"
        rules={[{ required: true, message: 'Please input your address!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default connect(({ employee }) => ({ employee }))(EmployeeList);
// ReactDOM.render(<Demo />, mountNode);
